<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{data.title}}</block>
			<block slot="right">
				<view class="action text-xxl" open-type="share" v-if="platform=='wxapp'">
					<text class="cuIcon-share"></text>
				</view>
				<view class="action text-xxl" @click="showshare=true" v-else>
					<text class="cuIcon-share"></text>
				</view>
			</block>
		</cu-custom>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" @confirm="dosearch()" v-model="keyword" type="text" placeholder="输入关键字搜索" confirm-type="search"></input>
			</view>
			<view class="action">
				<button @click="dosearch()" class="cu-btn bg-gradual-yellow shadow-blur round">搜索</button>
			</view>
		</view>
		<scroll-view class="bg-white" scroll-x  scroll-with-animation>
			<view class="cu-list no-border catelist">
				<view class="cu-item" :class="curcate==index?'active':''" v-for="(item, index) in data.categorys" :key="index" @click="curcate=index">
					<view class="text-center cover radius">
						<image class="png" :src="item.cover" mode="widthFix"></image>
					</view>
					<text :class="curcate==index?'text-bold':''">{{item.title}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="subcates" v-if="data.categorys.length>0">
			<view class="cu-card article">
				<view class="cu-item shadow arrow" @click="naviTo('lesson/index',{cid:data.categorys[curcate].id})">
					<view class="content">
						<view class="cover radius">
							<image :src="data.categorys[curcate].cover" mode="widthFix"></image>
						</view>
						<view class="desc">
							<view class="title">
								<view class="text-cut">{{data.categorys[curcate].title}}<text v-if="data.categorys[curcate].subtitle!=''">-{{data.categorys[curcate].subtitle}}</text></view>
							</view>
							<view class="text-content">{{data.categorys[curcate].summary}}</view>
							<view>
								<view class="cu-tag bg-red light sm round" v-if="data.categorys[curcate].homepage>0">热门</view>
								<view class="cu-tag bg-blue light sm round">共{{data.categorys[curcate].lessons}}节课程</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-item shadow arrow" @click="naviTo('lesson/index',{cid:item.id})" v-for="(item, index) in data.categorys[curcate].subcates" :key="index">
					<view class="content">
						<view class="cover radius">
							<image :src="item.cover" mode="widthFix"></image>
						</view>
						<view class="desc">
							<view class="title">
								<view class="text-cut">{{item.title}}<text v-if="item.subtitle!=''">-{{item.subtitle}}</text></view>
							</view>
							<view class="text-content">{{item.summary}}</view>
							<view>
								<view class="cu-tag bg-red light sm round" v-if="item.homepage>0">热门</view>
								<view class="cu-tag bg-blue light sm round">共{{item.lessons}}节课程</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="text-empty" v-else>空空如也</view>
		<share :platform="platform" :shareinfo="shareinfo" @closeshare="showshare=false" :showshare="showshare"></share>
	</view>
</template>

<script>
	import core from "@/static/core.js"
	import share from "@/components/util/share.vue"
	
	export default {
		components: {share},
		data() {
			return {
				platform:core.platform,
				curcate:0,
				lessons:"",
				keyword:"",
				showshare:false,
				shareinfo:{
					url:'',
					title:'',
					providers:4,
					provider:{}
				},
				data:{
					title:"全部分类",
					categorys:[],
					shareinfo:{
						"title":"",
						"desc":"",
						"cover":"",
						"url":""
					}
				}
			}
		},
		onLoad() {
			this.initData('lesson/cate',{fp:'category'});
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			this.initData('lesson/cate',{fp:'category'},function(){
				uni.stopPullDownRefresh();
			});
		},
		onShareAppMessage(e){
			return {
				title:this.shareinfo.title,
				path:core.page(this.shareinfo.url)
			}
		},
		methods:{
			initData(route, data={}, callback=false){
				var that = this;
				core.get(route,function(res){
					if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
						return core.report(res, true);
					}
					that.data = res;
					that.shareinfo = core.initshare(res.shareinfo.title,res.shareinfo.url,res.shareinfo.cover,res.shareinfo.desc);
					uni.setNavigationBarTitle({
						title:res.title
					});
					if(callback){
						callback(res);
					}
				},data);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			unSupport(){
				return core.toast('敬请期待');
			},
			dosearch(){
				if(this.keyword=='') return core.toast('请输入关键字搜索');
				this.naviTo('lesson/index',{keyword:this.keyword});
			}
		}
	}
</script>

<style>
	page{background: #F1F1F1 !important;}
	.catelist{white-space: nowrap; width: 100%;}
	.catelist .cu-item{display: inline-block; width: 160upx; padding: 20upx; text-align: center;}
	.catelist .cover{overflow: hidden; margin-bottom: 6upx;}
	.catelist .active{background: #F1F1F1;}
	.subcates .cu-item{padding:20upx 0; position: relative;}
	.subcates .cu-item .cover{width: 200upx; margin-right: 20upx; max-height: 200upx; overflow: hidden;}
	.subcates .cu-item .cover image{min-height: 150upx;}
	.subcates .cu-item .content{padding:0 20upx; min-height: 150upx;}
	.subcates .cu-item .content .title{padding: 0; line-height: 40upx;}
	.subcates .cu-item.arrow:before {
	    position: absolute;
	    top: 0;
	    right: 15px;
	    bottom: 0;
	    display: block;
	    margin: auto;
	    width: 15px;
	    height: 15px;
	    color: #8799a3;
	    content: "\e6a3";
	    text-align: center;
	    font-size: 17px;
	    font-family: cuIcon;
	    line-height: 15px;
	}
</style>
